M

MLOG

Bahasa Indonesia

Pelajari cara memperluas tipe TypeScript pihak ketiga dengan augmentasi modul, memastikan keamanan tipe dan meningkatkan pengalaman pengembang.

Augmentasi Modul TypeScript: Memperluas Tipe Pihak Ketiga

Kekuatan TypeScript terletak pada sistem tipenya yang tangguh. Ini memberdayakan pengembang untuk menangkap kesalahan lebih awal, meningkatkan pemeliharaan kode, dan menyempurnakan pengalaman pengembangan secara keseluruhan. Namun, saat bekerja dengan pustaka pihak ketiga, Anda mungkin menghadapi skenario di mana definisi tipe yang disediakan tidak lengkap atau tidak selaras sempurna dengan kebutuhan spesifik Anda. Di sinilah augmentasi modul datang untuk menyelamatkan, memungkinkan Anda untuk memperluas definisi tipe yang ada tanpa mengubah kode pustaka asli.

Apa itu Augmentasi Modul?

Augmentasi modul adalah fitur TypeScript yang kuat yang memungkinkan Anda untuk menambah atau memodifikasi tipe yang dideklarasikan dalam sebuah modul dari file yang berbeda. Anggap saja seperti menambahkan fitur ekstra atau kustomisasi ke kelas atau antarmuka yang ada dengan cara yang aman secara tipe. Ini sangat berguna ketika Anda perlu memperluas definisi tipe dari pustaka pihak ketiga, menambahkan properti baru, metode, atau bahkan menimpa yang sudah ada agar lebih mencerminkan kebutuhan aplikasi Anda.

Berbeda dengan penggabungan deklarasi (declaration merging), yang terjadi secara otomatis ketika dua atau lebih deklarasi dengan nama yang sama ditemukan dalam lingkup yang sama, augmentasi modul secara eksplisit menargetkan modul tertentu menggunakan sintaks declare module.

Mengapa Menggunakan Augmentasi Modul?

Berikut adalah alasan mengapa augmentasi modul adalah alat yang berharga dalam persenjataan TypeScript Anda:

Bagaimana Cara Kerja Augmentasi Modul

Konsep intinya berkisar pada sintaks declare module. Berikut adalah struktur umumnya:


declare module 'module-name' {
  // Deklarasi tipe untuk meng-augmentasi modul
  interface ExistingInterface {
    newProperty: string;
  }
}

Mari kita pecah bagian-bagian kuncinya:

Contoh Praktis

Contoh 1: Memperluas Pustaka Pihak Ketiga (Moment.js)

Katakanlah Anda menggunakan pustaka Moment.js untuk manipulasi tanggal dan waktu, dan Anda ingin menambahkan opsi pemformatan kustom untuk lokal tertentu (misalnya, untuk menampilkan tanggal dalam format tertentu di Jepang). Definisi tipe asli Moment.js mungkin tidak menyertakan format kustom ini. Berikut cara Anda dapat menggunakan augmentasi modul untuk menambahkannya:

  1. Instal definisi tipe untuk Moment.js: 
    
npm install @types/moment
  2. Buat file TypeScript (misalnya, moment.d.ts) untuk mendefinisikan augmentasi Anda: 
    
// moment.d.ts
import 'moment'; // Impor modul asli untuk memastikan ketersediaannya

declare module 'moment' {
  interface Moment {
    formatInJapaneseStyle(): string;
  }
}
  3. Implementasikan logika pemformatan kustom (dalam file terpisah, misalnya, moment-extensions.ts): 
    
// moment-extensions.ts
import * as moment from 'moment';

moment.fn.formatInJapaneseStyle = function(): string {
  // Logika pemformatan kustom untuk tanggal Jepang
  const year = this.year();
  const month = this.month() + 1; // Bulan berbasis 0
  const day = this.date();
  return `${year}年${month}月${day}日`;
};
  4. Gunakan objek Moment.js yang telah di-augmentasi: 
    
// app.ts
import * as moment from 'moment';
import './moment-extensions'; // Impor implementasinya

const now = moment();
const japaneseFormattedDate = now.formatInJapaneseStyle();
console.log(japaneseFormattedDate); // Output: mis., 2024年1月26日

Penjelasan:

Contoh 2: Menambahkan Properti ke Objek Request (Express.js)

Misalkan Anda menggunakan Express.js dan ingin menambahkan properti kustom ke objek Request, seperti userId yang diisi oleh middleware. Berikut cara Anda dapat mencapainya dengan augmentasi modul:

  1. Instal definisi tipe untuk Express.js: 
    
npm install @types/express
  2. Buat file TypeScript (misalnya, express.d.ts) untuk mendefinisikan augmentasi Anda: 
    
// express.d.ts
import 'express'; // Impor modul asli

declare module 'express' {
  interface Request {
    userId?: string;
  }
}
  3. Gunakan objek Request yang telah di-augmentasi di middleware Anda: 
    
// middleware.ts
import { Request, Response, NextFunction } from 'express';

export function authenticateUser(req: Request, res: Response, next: NextFunction) {
  // Logika autentikasi (misalnya, memverifikasi JWT)
  const userId = 'user123'; // Contoh: Ambil ID pengguna dari token
  req.userId = userId; // Tetapkan ID pengguna ke objek Request
  next();
}
  4. Akses properti userId di handler rute Anda: 
    
// routes.ts
import { Request, Response } from 'express';

export function getUserProfile(req: Request, res: Response) {
  const userId = req.userId;
  if (!userId) {
    return res.status(401).send('Unauthorized');
  }

  // Ambil profil pengguna dari database berdasarkan userId
  const userProfile = { id: userId, name: 'John Doe' }; // Contoh
  res.json(userProfile);
}

Penjelasan:

Contoh 3: Menambahkan Atribut Kustom ke Elemen HTML

Saat bekerja dengan pustaka seperti React atau Vue.js, Anda mungkin ingin menambahkan atribut kustom ke elemen HTML. Augmentasi modul dapat membantu Anda mendefinisikan tipe untuk atribut kustom ini, memastikan keamanan tipe dalam templat atau kode JSX Anda.

Mari kita asumsikan Anda menggunakan React dan ingin menambahkan atribut kustom bernama data-custom-id ke elemen HTML.

  1. Buat file TypeScript (misalnya, react.d.ts) untuk mendefinisikan augmentasi Anda: 
    
// react.d.ts
import 'react'; // Impor modul asli

declare module 'react' {
  interface HTMLAttributes extends AriaAttributes, DOMAttributes {
    "data-custom-id"?: string;
  }
}
  2. Gunakan atribut kustom di komponen React Anda: 
    
// MyComponent.tsx
import React from 'react';

function MyComponent() {
  return (
    
     
      Ini adalah komponen saya.
    
    
  );
}

export default MyComponent;

Penjelasan:

Praktik Terbaik untuk Augmentasi Modul

Kesalahan Umum dan Cara Menghindarinya

Manfaat Menggunakan Augmentasi Modul

Menggunakan augmentasi modul di TypeScript memberikan beberapa manfaat utama:

Kesimpulan

Augmentasi modul TypeScript adalah teknik yang kuat untuk memperluas dan menyesuaikan definisi tipe dari pustaka pihak ketiga. Dengan menggunakan augmentasi modul, Anda dapat memastikan bahwa kode Anda tetap aman secara tipe, meningkatkan pengalaman pengembang, dan menghindari duplikasi kode. Dengan mengikuti praktik terbaik dan menghindari kesalahan umum yang dibahas dalam panduan ini, Anda dapat secara efektif memanfaatkan augmentasi modul untuk membuat aplikasi TypeScript yang lebih tangguh dan mudah dipelihara. Manfaatkan fitur ini dan buka potensi penuh dari sistem tipe TypeScript!